<template>
    <div class="box">
        <div class="gray-box"></div>
        <div class="list-box">
            <label for="">姓名</label>
            <input type="text" v-model="username">
        </div>
        <div class="gray-box"></div>
        <div class="list-box">
            <label for="">联系方式</label>
            <input type="tel" v-model="phone">
        </div>
        <button>保存</button>
    </div>
</template>

<script>
    export default {
        name: "modifyInfo",
        data(){
            return{
                username:'张晓明',
                phone:'1514557111'
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/public";
.box{
    background-color: $gray_bg;
    .list-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: vw(100);
        padding: 0 vw(24);
        color: #333;
        font-size: vw(32);
        background-color: #fff;
        input{
            color: #666;
            text-align: right;
        }
    }
    button{
        display: block;
        width:vw(710);
        height:vw(78);
        margin: vw(100) auto 0;
        background: $gradientBg;
        border-radius:39px;
        font-size: vw(32);
        color: #fff;
    }
}
</style>
